<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" href="css/muse-ui.css">
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
		<link rel="stylesheet" href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css">
		<link rel="stylesheet" href="css/muse-ui-loading.css">
		<link rel="stylesheet" href="https://at.alicdn.com/t/font_951857_sr7zod4vu4.css">
		<script src="js/vue.min.js"></script>
		<script src="js/muse-ui.js"></script>
		<script src="js/muse-ui-loading.js"></script>
		<script src="js/muse-ui-toast.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/utils.js"></script>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			body{
				margin: 0;
				padding: 0;
			}
			.container{
				display: flex;
				justify-content: center;
				align-items: center;
				height: calc(100vh);
			}
			.scan-bar{
				width: 100%;
				height: 100px;
				border: 2px solid #3FCCF0;
				position: fixed;
				z-index: 1;
				font-size: 12px;
				text-align: center;
				line-height: 100px;
				color: #3FCCF0;
			}
			.pane {
				/* background-image: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,1)); */
				background: linear-gradient(to left,rgba(63,204,240,.8),rgba(255,255,255,0));
				width: 50px;
				height: 100px;
				z-index: 2;
				position: fixed;
				animation: move 3s linear infinite;
			}
			 @keyframes move {
				from{left:0}
				to{left:calc(100%)}
			}
		</style>
	</head>
	<body>
		<div style="position: fixed;top: 0;width: 100%;height: 100%;">
			<canvas id="canvas" style="width: 100%;height: 100px;background-color: #000000;display: none;"></canvas>
		</div>
		<div id="body">
			<mu-container>
				<!-- <button style="position: fixed;bottom: 0;left: 50%;" @click="ocr()">按钮</button> -->
				<div class="pane"></div>
				<div class="scan-bar">请将燃气表读数置于此框内
				</div>
				<video id="video" autoplay></video>
			</mu-container>
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#body",
			data() {
				return {
					ocrNumberTimes:0,
					allWords:[],
					valueLength:0
				}
			},
			methods: {
				findMostValue(arr){
					var h = {};
					var maxNum = 0;
					var maxEle = null;
					for(var i=0;i<arr.length;i++){
						var a = arr[i];
						h[a]===undefined?h[a]=1:(h[a]++);
						if(h[a]>maxNum){
							maxEle = a;
							maxNum = h[a];
						}
					}
					return maxEle;
				},
				ocrText(base64,imgFull) {
					this.ocrNumberTimes++;
					base64 = base64.substring(base64.indexOf(",") + 1, base64.length)
					var params = {
						"base64": base64
					}
					util.ajax("/meter/ocrMeterValue", params, data => {
						var res = JSON.parse(data.object);
						var words = res.words_result;
						words.forEach(item => {
							if(item.words.length>4){
								this.allWords.push(item.words);
							}
							var length = parseInt(item.words.length);
							if (length == this.valueLength) {
								clearInterval(timer)
								util.setData('scan_value',''+item.words)
								util.setData('scan_imgPath',imgFull)
								var recordMeterView = plus.webview.getWebviewById("recordMeter.html");
								recordMeterView.evalJS('vm.setMeterValue()');
								util.back();
								return;
							}
						})
						if(this.ocrNumberTimes>4){
							var value = this.findMostValue(this.allWords);
							if(value==null){
								alert("识别失败（识别时请不要使用燃气及请把燃气表读数至于扫描框内）");
								clearInterval(timer);
								util.back()
							}else{
								clearInterval(timer)
								util.setData('scan_value',''+item.words)
								util.setData('scan_imgPath',imgFull)
								var recordMeterView = plus.webview.getWebviewById("recordMeter.html");
								recordMeterView.evalJS('vm.setMeterValue()');
								util.back();
							}
						}
					});
				},
				startOcr() {
					timer = setInterval(
						function() {
							// ctx.drawImage(video,0,0);
							// var imgFull = canvas.toDataURL("image/jpeg", 0.5);
							ctx.drawImage(video, 0, height / 2 - 50, width, 100, 0, 0, width, 100);
							var data = canvas.toDataURL("image/jpeg", 0.5);
							imgFull = data;
							vm.ocrText(data,imgFull);
						}, 3000);
				}
			}
		})
		var getUserMedia, video, canvas, ctx, timer;
		document.addEventListener('plusready', function() {
			getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||
				navigator
				.msGetUserMedia);
			video = document.getElementById('video');
			canvas = document.getElementById('canvas');
			ctx = canvas.getContext('2d');
			height = plus.screen.resolutionHeight;
			width = plus.screen.resolutionWidth;
			getUserMedia.call(navigator, {
				video: {
					width: height,
					height: width,
					facingMode: {
						exact: "environment"
					}
				},
				audio: false
			}, function(localMediaStream) {
				video.src = window.URL.createObjectURL(localMediaStream);
				video.onloadedmetadata = function(e) {};
			}, function(e) {});
			plus.webview.currentWebview().addEventListener("show",()=>{
				this.ocrNumberTimes=0;
				this.allWords = [];
				this.valueLength = util.getData("valueLength");
				vm.startOcr();
			},null)
			plus.webview.currentWebview().addEventListener("hide",()=>{
				this.ocrNumberTimes=0;
				this.allWords = [];
				clearInterval(timer)
			},null)
		});
	</script>
</html>
